Step 5 - Create the content for the Media page

In this step of the tutorial you create the content for the Media page to show a list of albums in a list box. You first create a prefab template for an album item and then create a Trajectory List Box 3D node to enable users to browse the album items in the Media section of your application.

Create the prefab for the Media page items

In this section you create a prefab that defines the template for the items shown in the Media page.

To create the prefab for the Media page items:

1. In the Project > Prefabs create a Plane node, name it Item, and in the Properties set:
   • Material to PhongMaterial
   • Height to 5
     
2. In the Project > Prefabs double-click the Item prefab to open it in its own Preview tab, and in the Item node you created in the previous step, create these nodes:
   • Plane and name it Album
   • Text Block 3D and name it Description
   • Plane and name it Shadow
   
3. In the Project > Prefabs > Item node select the Album node and in the Properties add and set:
   • Material to PhongTexturedMaterial
   • Width and Height to 3,5
   • Render Transformation property Translation Y attribute to 0,5
   • Render Transformation property Translation Z attribute to 0,1
   • Texture property and click .
     This enables you to display a different texture for each instance of the prefab.
   
4. In the Project > Prefabs > Item node select the Shadow node and in the Properties add and set:
   • Material to TexturedMaterial
   • Height to 1
   • Render Transformation property Translation Y attribute to -3,5
   • Texture property to ShadowMedia
   • Blend Mode to Alpha: Automatic
   • Blend Intensity to 0,5
5. In the Project > Prefabs > Item node select the Description node and in the Properties add and set:
   • Render Transformation property Translation Y attribute to -1,9
   • Render Transformation property Translation Z attribute to 0,1
   • Font Size to 30
   • Font Color to Black
   • Text property and click .
     This enables you to display a different text for each instance of the prefab.
   

Create and set a Trajectory List Box 3D node and add items to it

In this section you create a Trajectory List Box 3D node that allows the users to scroll the media library content. Use the Trajectory List Box 3D node to create scrollable lists of items arranged along a trajectory. Kanzi Studio creates and uses a circle trajectory by default. You can use a circle, line, or a spline trajectory. See Trajectories.

1. In the Project double-click the Media Page node to open it in its own Preview tab.
2. In the Project > RootPage > Media node create a Viewport 2D node, create a Scene node inside it, and create a Trajectory List Box 3D node inside the Scene node.
   
3. Drag from the Prefabs several Item prefabs to the Trajectory List Box 3D you created in the previous step.
   
   
4. In the Project select the Trajectory List Box 3D node and in the Preview use the Node tool to rotate and position the Trajectory List Box 3D node in the center of the Media Page node.
   
5. In the Project select the Media > Viewport 2D > Scene create and adjust the lights:
   1. Select the Directional Light and in the Properties set the Layout Transformation property attributes Rotation X and Rotation Y to 0.
   2. In the Project press Alt and right-click the Scene node, select Point Light and in the Preview use the Node tool to move it in front of the front item in the Trajectory List Box 3D.
      the
      
6. In the Project in the Trajectory List Box 3D node select each instance of the Item prefab and in the Properties add and set:
   1. ItemTexture to one of the Album textures.
   2. ItemText to the description of the that album.
   
7. Click the Screen tab under the main menu to show the entire application in the Preview.
   

< PREVIOUS STEP

NEXT STEP >

See also

To find out more about working with the Trajectory List Box 3D, see Using the Trajectory List Box 3D node.

Open topic with navigation